<template>
  <!-- 添加边民弹出层---默认单选 / isSingleSelect接收false时可多选 -->
  <el-drawer
    title="选择边民"
    :visible.sync="showDrawer"
    :size="700"
    :modal="true"
    direction="rtl"
    append-to-body
  >
    <el-form
      :model="queryParams"
      ref="queryVehicleForm"
      :inline="true"
      label-width="88px"
      size="mini"
      @submit.native.prevent
    >
      <div class="sub-conditions">
        <div>
          <el-form-item label="边民姓名：" prop="">
            <el-input
              v-model.trim="queryParams.borderName"
              placeholder="请输入边民姓名查询"
              clearable
            />
          </el-form-item>
          <el-form-item label="边民身份证号：" prop="">
            <el-input
              v-model.trim="queryParams.idno"
              placeholder="请输入边民身份证号查询"
              clearable
            />
          </el-form-item>
          <el-button
            class="filter-item"
            type="warning"
            icon="el-icon-search"
            @click="getList"
            size="mini"
          >查询
          </el-button>
        </div>
      </div>
    </el-form>
    <el-table
      v-if="showDrawer"
      :data="tableData"
      size="mini"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="singleTable"
    >
      <el-empty
        slot="empty"
        :image="require('@/assets/images/empty.png')"
        :image-size="80"
      ></el-empty>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column prop="borderName" label="边民姓名" width="90">
      </el-table-column>
      <el-table-column prop="idCardNo" label="身份证号" min-width="150">
        <template slot-scope="scope">
          <span>{{ idCardDesensitize(scope.row.idCardNo) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="putrecNo" label="备案编号" min-width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="birplAddr" label="户籍地址" min-width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="borderTel" label="电话号码" width="120">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :small="true"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-button
      class="filter-item filter-item2"
      type="success"
      icon="el-icon-check"
      @click="sureBorder"
      size="small"
    >
      确定
    </el-button>
  </el-drawer>
</template>

<script>
import {findBorderPeopleAll} from "@/api/bt/bmhs";

export default {
  name: "selectBorder",
  props: {
    isSingleSelect: {  //true-控制只能单选， 为false时则为多选
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showDrawer: false,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        borderName: "",
        idno: ""
      },
      total: 0
    }
  },
  methods: {
    getList() {
      findBorderPeopleAll(this.queryParams)
        .then((resp) => {
          this.tableData = resp.rows;
          this.total = resp.total;
        })
        .finally(() => {
        });
    },
    open() {
      this.showDrawer = true;
      this.getList();
    },
    handleSelectionChange(selection, val) {
      if (this.isSingleSelect) {
        if (selection.length > 1) {
          let del_row = selection.shift();
          this.$refs.singleTable.toggleRowSelection(del_row, false);
        }
      }
      this.selectedBorder = selection;
    },
    sureBorder() {
      if (this.selectedBorder.length > 0) {
        if (this.isSingleSelect) {
          this.$emit("handleSelected", this.selectedBorder[0]);
        } else {
          this.$emit("handleSelected", this.selectedBorder);
        }
        this.showDrawer = false;
      } else {
        this.$message.warning("请先选择边民！");
      }
    }
  }
};
</script>

<style>
</style>
